<script>
import ActiveIcon from '@/assets/icons/sign-in-active.png';
import InactiveIcon from '@/assets/icons/sign-in-inactive.png';

export default {
  props: {
    times: {
      type: Number,
      default: 0
    }
  },
  components: {
  },
  computed: {
    ActiveIcon: () => ActiveIcon,
    InactiveIcon: () => InactiveIcon,
    signInDays() {
      return [
        4,
        8,
        16,
        32,
        64,
        108,
        168,
      ].map((days, index) => ({
        signedIn: index < this.times,
        integral: days
      }))
    }
  },
  data() {
    return {
    }
  },
  methods: {
  },
}
</script>

<template>
  <div class="sign-in-card">
    <div v-for="(item, index) in signInDays" :key="item.integral" class="sign-in-card-item">
      <div style="position: relative;">
        <img class="sign-in-card-icon" :src="item.signedIn ? ActiveIcon : InactiveIcon">
        <div class="sign-in-card-integral">{{ item.integral }}</div>
      </div>
      <div :class="['sign-in-card-text', {
        'sign-in-card-text-active': item.signedIn
      }]">
        <span style="flex-shrink: 0;">第{{ index + 1 }}天</span>
        <span v-if="index === signInDays.length - 1" style="flex-shrink: 0;">以上</span>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.sign-in-card {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;

  .sign-in-card-item {
    width: 23%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .sign-in-card-icon {
    width: 100%;
  }

  .sign-in-card-integral {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% - 3.5px), calc(-50% - 6px));
    color: white;
    font-size: 12px;
  }

  .sign-in-card-text {
    font-size: 11px;
    transform: translate(-4px, -2px);
    color: #c5c5c5;
    display: flex;

    &-active {
      color: #e58e31;
    }
  }
}
</style>
